<template>
  <div>
    <el-upload
      style="position: relative;top: 10px;height: 120px;"
      action=""
      :before-upload="() => false"
      :show-file-list="false"
      :auto-upload="false"
      class="avatar-uploader"
      accept="image/jpeg,image/jpg,image/png,image/webp"
      list-type="picture-card"
      :on-change="change"
    >
      <div v-if="url" class="avatar">
        <el-button
          v-if="deletePic"
          class="deletePic"
          type="danger"
          size="mini"
          circle
          icon="el-icon-delete"
          @click.stop="deletePic(index)"
        ></el-button>
        <img :src="url" class="avatar" />
      </div>
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-dialog
      title="图片剪裁"
      width="700px"
      :visible.sync="pictureVisible"
      append-to-body
    >
      <div class="cropper-content">
        <div class="cropper" style="text-align:center">
          <vueCropper
            ref="cropper"
            :img="pictureOption.img"
            :outputSize="pictureOption.size"
            :outputType="pictureOption.outputType"
            :info="true"
            :full="pictureOption.full"
            :canMove="pictureOption.canMove"
            :canMoveBox="pictureOption.canMoveBox"
            :original="pictureOption.original"
            :autoCrop="pictureOption.autoCrop"
            :fixed="pictureOption.fixed"
            :fixedNumber="pictureOption.fixedNumber"
            :centerBox="pictureOption.centerBox"
            :infoTrue="pictureOption.infoTrue"
            :fixedBox="pictureOption.fixedBox"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cropperChangeScale(1)">放大</el-button>
        <el-button @click="cropperChangeScale(-1)">缩小</el-button>
        <el-button @click="cropperRotateLeft">左旋转</el-button>
        <el-button @click="cropperRotateRight">右旋转</el-button>
        <el-button type="primary" @click="finish">确认剪切</el-button>
        <el-button type="ghost" @click="finishImidiately"
          >跳过直接上传原图</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { VueCropper } from "vue-cropper";
import { uploadUrl } from "@/util/upload";

export default {
  name: "uploadCropper",
  components: {
    VueCropper,
  },
  props: {
    pictureOption: {
      type: Object,
      default: () => ({
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        infoTrue: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        full: false, // 输出原图比例截图 props名full
        outputType: "png", // 裁剪生成图片的格式
        canMove: false, // 能否拖动图片
        original: false, // 上传图片是否显示原始宽高
        canMoveBox: true, // 能否拖动截图框
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        // autoCropWidth: 400, // 默认生成截图框宽度
        // autoCropHeight: 300, // 默认生成截图框高度
        fixedBox: false, // 截图框固定大小
        fixed: false, // 是否开启截图框宽高固定比例
        fixedNumber: [5, 5], // 截图框的宽高比例
      }),
    },
    url: {
      type: String,
      default: "",
    },
    index: {
      type: Number
    },
    handleAvatarSuccess: {
      type: Function,
    },
    deletePic: {
      type: Function,
    },
  },
  data() {
    return {
      uploadImg: "",
      pictureVisible: false,
    };
  },
  methods: {
    // 放大缩小
    cropperChangeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    // 左旋
    cropperRotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    // 右旋
    cropperRotateRight() {
      this.$refs.cropper.rotateRight();
    },
    change(file, a) {
      console.log(file, a);
      this.$nextTick(() => {
        this.pictureOption.img = URL.createObjectURL(file.raw);
        this.pictureOption.imgName = file.name;
        this.pictureVisible = true;
        this.rawFile = file.raw;
      });
    },
    uploadImgFile(file) {
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      const data = new FormData();
      data.append("file", file);
      data.append("format", file.type);
      data.append("size", file.size);
      data.append("name", this.pictureOption.imgName);
      this.$axios.post(uploadUrl(), data, config).then((response) => {
        this.pictureVisible = false;
        this.handleAvatarSuccess(response, data);
      });
    },
    finishImidiately() {
      this.uploadImgFile(this.rawFile);
    },
    finish(type) {
      this.$refs.cropper.getCropBlob((file) => {
        this.uploadImgFile(file);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar {
  width: 146px;
  height: 146px;
  display: block;
  overflow: hidden;
  position: relative;
  img {
    width: 146px;
    height: 146px;
    display: block;
  }
  .deletePic {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 999;
  }
}
.cropper {
  width: auto;
  height: 350px;
}
/* .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
} */
</style>
